<!-- components/FormItemWithTip.vue -->
<template>
  <span class="form-label-with-tip">
    {{ label }}
    <ElTooltip :content="tipContent" placement="top">
      <el-icon class="tip-icon">
        <QuestionFilled />
      </el-icon>
    </ElTooltip>
  </span>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ElTooltip, ElIcon } from 'element-plus'
import { QuestionFilled } from '@element-plus/icons-vue'
import { getFormTip, FORM_TYPES } from '@/utils/tips'

interface Props {
  label: string
  field: string
  formType?: string
  customTip?: string
}

const props = withDefaults(defineProps<Props>(), {
  formType: FORM_TYPES.PREFERRED_CATALOG
})

const tipContent = computed(() => {
  return props.customTip || getFormTip(props.formType, props.field) || '暂无说明'
})
</script>

<style scoped>
.form-label-with-tip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tip-icon {
  color: #909399;
  cursor: help;
  font-size: 14px;
}
</style>
